import {
  FooterToolbar,
  PageContainer,
  ProForm,
  ProFormDateTimePicker,
  ProFormGroup,
  ProFormList,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import { history, useLocation } from '@umijs/max';
import { Button, Card, Col, Divider, Radio, Row } from 'antd';
import React, { useEffect, useState } from 'react';
import Flow from './components/Flow';
import SearchTree from './components/SearchTree';
import './index.less';
const SceneSave: React.FC = () => {
  const location = useLocation();
  const [isShowFooter, setIsShowFooter] = useState(true);
  useEffect(() => {
    // 底部操作栏因为是在body上挂载的,导致无法销毁 这里手动隐藏
    if (location.pathname === '/ruleEngine/sceneLinkage/SceneSave') {
      setIsShowFooter(true);
    }
    return () => {
      setIsShowFooter(false);
    };
  }, [location.pathname]);
  // 返回
  const handleBack = () => {
    history.replace('/ruleEngine/sceneLinkage');
  };
  return (
    <PageContainer style={{ overflow: 'hidden' }}>
      <Row gutter={5} className={'scene-linkage-content'}>
        <Col span={4}>
          <Card style={{ height: '100%' }} bodyStyle={{ padding: '0 ', height: '100%' }}>
            <Radio.Group
              defaultValue="a"
              buttonStyle="solid"
              style={{ width: '100%', marginBottom: '10px' }}
            >
              <Radio.Button style={{ width: '50%' }} value="a">
                工艺路线
              </Radio.Button>
              <Radio.Button style={{ width: '50%' }} value="b">
                单体设备
              </Radio.Button>
            </Radio.Group>
            <SearchTree></SearchTree>
          </Card>
        </Col>
        <Col span={20}>
          <Card>
            <ProForm
              layout="horizontal"
              submitter={{
                render: (_, dom) =>
                  isShowFooter && (
                    <FooterToolbar>
                      {[
                        <Button key={111222} onClick={handleBack}>
                          返回
                        </Button>,
                        ...dom,
                      ]}
                    </FooterToolbar>
                  ),
              }}
              onFinish={async (values) => console.log(values)}
            >
              <ProForm.Group>
                <ProFormText name="name1" label="产品编码" placeholder="请输入" />
                <ProFormText name="name2" label="产品名称" placeholder="请输入" />
                <ProFormText name="name3" label="创建人" placeholder="请输入" />
                <ProFormDateTimePicker name="name6" label="创建时间" />
                <ProFormSelect
                  options={[
                    {
                      value: '1',
                      label: '继承工艺路线数据',
                    },
                    {
                      value: '2',
                      label: '单体设备',
                    },
                  ]}
                  colProps={{ xl: 8, md: 12 }}
                  name="name5"
                  label="工艺路线编号"
                />
                <ProFormSelect
                  options={[
                    {
                      value: '1',
                      label: '继承工艺路线数据',
                    },
                    {
                      value: '2',
                      label: '单体设备',
                    },
                  ]}
                  colProps={{ xl: 24, md: 24 }}
                  name="name4"
                  label="工艺路线名称"
                />
              </ProForm.Group>
              <Card bodyStyle={{ padding: 0 }}>
                {/* 画布 */}
                <Flow></Flow>
              </Card>
              <Row style={{ marginTop: 10 }} gutter={10}>
                <Col span={8}>
                  <Card
                    title="触发器"
                    bodyStyle={{
                      padding: 6,
                    }}
                  >
                    <ProFormList
                      copyIconProps={false}
                      alwaysShowItemLabel={true}
                      name="users"
                      initialValue={[]}
                      creatorButtonProps={{
                        position: 'bottom',
                        creatorButtonText: '添加',
                      }}
                      // 新建一行的默认值
                      creatorRecord={{
                        useMode: '1',
                      }}
                    >
                      {(f, index) => {
                        return (
                          <>
                            {index !== 0 && <Divider style={{ marginTop: 0 }}></Divider>}
                            <ProFormSelect
                              width={'sm'}
                              key="useMode1"
                              options={[
                                {
                                  value: '1',
                                  label: '手动触发',
                                },
                              ]}
                              name="useMode1"
                              label="触发类型"
                            />

                            <ProFormSelect
                              key="useMode2"
                              options={[
                                {
                                  value: '1',
                                  label: '继承设备类型',
                                },
                                {
                                  value: '2',
                                  label: '单体设备',
                                },
                              ]}
                              name="useMode2"
                              label="设备类型"
                            />
                            <ProFormSelect
                              key="useMode3"
                              options={[
                                {
                                  value: '1',
                                  label: '继承设备类型',
                                },
                                {
                                  value: '2',
                                  label: '单体设备',
                                },
                              ]}
                              name="useMode3"
                              label="设备"
                            />
                            <ProFormSelect
                              key="useMode4"
                              options={[
                                {
                                  value: '1',
                                  label: '继承设备类型',
                                },
                                {
                                  value: '2',
                                  label: '单体设备',
                                },
                              ]}
                              name="useMode4"
                              label="点位"
                            />
                          </>
                        );
                      }}
                    </ProFormList>
                  </Card>
                </Col>
                <Col span={8}>
                  <Card
                    title="执行条件"
                    bodyStyle={{
                      padding: 6,
                    }}
                  >
                    <ProFormList
                      name="users4"
                      initialValue={[]}
                      creatorButtonProps={{
                        position: 'bottom',
                        creatorButtonText: '添加',
                      }}
                      copyIconProps={false}
                    >
                      {(f, index) => {
                        return (
                          <>
                            <Divider style={{ marginTop: 0 }}>第{index + 1}步</Divider>
                            <ProFormList name="labels" initialValue={[]} copyIconProps={false}>
                              {(f, index2) => {
                                return (
                                  <>
                                    {index2 !== 0 && <Divider style={{ marginTop: 0 }}></Divider>}
                                    <ProFormGroup
                                      direction={'horizontal'}
                                      key="group12"
                                      size={'small'}
                                    >
                                      <ProFormSelect
                                        key="useMode111"
                                        options={[
                                          {
                                            value: '1',
                                            label: '选择点位设备',
                                          },
                                        ]}
                                        name="useMode111"
                                      />
                                      <ProFormSelect
                                        key="useMode113"
                                        options={[
                                          {
                                            value: '1',
                                            label: '>=',
                                          },
                                        ]}
                                        name="useMode113"
                                      />
                                      <ProFormSelect
                                        key="useMode1332"
                                        options={[
                                          {
                                            value: '1',
                                            label: '自定义',
                                          },
                                        ]}
                                        name="useMode1332"
                                      />
                                      <ProFormSelect
                                        key="useMode144"
                                        options={[
                                          {
                                            value: '1',
                                            label: '并且',
                                          },
                                        ]}
                                        name="useMode144"
                                      />
                                    </ProFormGroup>
                                  </>
                                );
                              }}
                            </ProFormList>
                          </>
                        );
                      }}
                    </ProFormList>
                  </Card>
                </Col>
                <Col span={8}>
                  <Card
                    bodyStyle={{
                      padding: 6,
                    }}
                    title="执行动作"
                    extra={
                      <Radio.Group size="small" defaultValue="a" buttonStyle="solid">
                        <Radio.Button value="a">串行</Radio.Button>
                        <Radio.Button value="b">并行</Radio.Button>
                      </Radio.Group>
                    }
                  >
                    <ProFormList
                      copyIconProps={false}
                      alwaysShowItemLabel={true}
                      name="users33"
                      initialValue={[]}
                      creatorButtonProps={{
                        position: 'bottom',
                        creatorButtonText: '添加',
                      }}
                      // 新建一行的默认值
                      creatorRecord={{
                        useMode: '1',
                      }}
                    >
                      {(f, index) => {
                        return (
                          <>
                            <Divider style={{ marginTop: 0 }}>第{index + 1}步</Divider>
                            <ProFormSelect
                              width={'sm'}
                              key="useMode1"
                              options={[
                                {
                                  value: '1',
                                  label: '手动触发',
                                },
                              ]}
                              name="useMode1"
                              label="设备类型"
                            />

                            <ProFormSelect
                              key="useMode2"
                              options={[
                                {
                                  value: '1',
                                  label: '继承设备类型',
                                },
                                {
                                  value: '2',
                                  label: '单体设备',
                                },
                              ]}
                              name="useMode2"
                              label="设备"
                            />
                            <ProFormGroup size="small">
                              <ProFormSelect
                                key="useMode433"
                                width={110}
                                options={[
                                  {
                                    value: '1',
                                    label: '继承设备类型',
                                  },
                                  {
                                    value: '2',
                                    label: '单体设备',
                                  },
                                ]}
                                name="useMode433"
                                label="命令"
                              />
                              <ProFormSelect
                                width={110}
                                key="useMode4"
                                options={[
                                  {
                                    value: '1',
                                    label: '继承设备类型',
                                  },
                                  {
                                    value: '2',
                                    label: '单体设备',
                                  },
                                ]}
                                name="useMode4"
                              />
                            </ProFormGroup>
                          </>
                        );
                      }}
                    </ProFormList>
                  </Card>
                </Col>
              </Row>
            </ProForm>
          </Card>
        </Col>
      </Row>
    </PageContainer>
  );
};

export default SceneSave;
